<template>
  <div id="app">
    <nav>
      <a href="javascript:;" @click="goHome()">首页</a> |
      <router-link to="/news-list">新闻列表</router-link> |
      <a href="javascript:;" @click="goAbout()">关于我们</a>
    </nav>
    <router-view class="container"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goAbout() {
      this.$router.push({path :'/about', query: {id: 1}});
    }
  }
}
</script>
<style>
.container {
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    width: 600px;
    height: 500px;
  }
  #app {
    text-align: center;
    width: 800px;
    margin: 60px auto 0;
  }
</style>